<template>
  <div class="page">
    <div class="nav">更新日志</div>
    <div style="margin-top: 20px; ">
      <el-card class="box-card">
        <ul class="ivu-timeline">
          <li
            class="ivu-timeline-item"
            v-for="(LOG,index) in logs"
            :key="index">
            <div class="ivu-timeline-item-tail"/>
            <div class="ivu-timeline-item-head ivu-timeline-item-head-custom ">

              <i class="iconfont icon-true"/>
            </div>
            <div class="ivu-timeline-item-content">
              <div class="timeline-title">{{ LOG.version }}</div>
              <code class="doc">{{ LOG.time }}</code>
              <div class="itemcontent">
                <ul >
                  <li
                    v-for=" (con,ins) in LOG.contents"
                    :key="ins">{{ con }}</li>
                </ul>
              </div>
            </div>
          </li>
        </ul>
      </el-card>
    </div>

  </div>
</template>
<script type="es6">
import log from '../libs/changLog';
export default {
  data () {
    return {
      logs: log
    };
  },
  methods: {},
  mounted () {

  }
};
</script>
<style lang="less">
  @import "../styles/timeline.less";

  .timeline-title{
    font-size: 18px;
  }
  .itemcontent{
    width: 600px;
    li{
      margin-bottom: 5px;
      font-size: 14px;
    }
  }
  code {
    display: inline-block;
    background: #f7f7f7;
    margin: 0 3px;
    padding: 1px 5px;
    border-radius: 3px;
    color: #666;
    border: 1px solid #eee;
  }
  .doc{
    margin: 10px 0;
  }
  .page{
    padding: 20px;
    color: #5d5c5c;
    .nav{
      font-size: 20px;
    }
  }
</style>
